<template>
  <view class="register-container">
    <u-gap height="40" bg-color="#FFFFFF"></u-gap>
    <view class="register-view">
      <view class="form-view">
        <u-form :model="registerForm" ref="registerForm">
          <u-form-item label-position="top">
            <u-input v-model="registerForm.mobile" placeholder="请输入手机号" maxlength="11" />
          </u-form-item>
          <u-form-item label-position="top">
            <u-input v-model="registerForm.captcha" placeholder="请输入图片验证码" maxlength="4" />
            <u-image slot="right" width="120" height="60" :src="captcha_url" @click="handleChangeCaptchalUrl"></u-image>
          </u-form-item>
          <u-form-item label-position="top">
            <u-input v-model="registerForm.sms_code" placeholder="请输入短信验证码" maxlength="6" />
            <u-button slot="right" type="error" size="mini" @click="handleCode">{{codeTips}}</u-button>
            <u-verification-code seconds="60" ref="uCode" @change="handleCodeChange"></u-verification-code>
          </u-form-item>
          <u-form-item label-position="top">
            <u-input type="password" v-model="registerForm.password" placeholder="请输入密码" />
          </u-form-item>
          <u-form-item label-position="top">
            <u-input disabled v-model="registerForm.refererCode" placeholder="请输入分享码" />
          </u-form-item>
        </u-form>
        <u-button :disabled="login_disabled_valsms" class="u-m-20" type="error" shape="circle"
          @click="handleValSmsCode">立即注册</u-button>
        <u-button class="u-m-20" type="error" shape="circle"
          @click="xiazai">
          复制下载链接</u-button>
      </view>

      <!-- <view style="margin: 30rpx auto; width: 100%;text-align: center;" @click="$qqyUtils.copyBankCard('http://m.ruixingzhubao.xjkuang.com/xingbaihui.apk')">
        <view>下载链接：点击复制</view>
        <view>http://m.ruixingzhubao.xjkuang.com/xingbaihui.apk</view>
      </view> -->
    </view>
    <!-- 注册协议弹出层 -->
    <u-popup class="agreement-view" :mask-close-able="false" v-model="showAgreement" mode="bottom" length="70%"
      border-radius="20">
      <view class="u-p-30 u-text-center" style="font-weight: 600;">
        {{ agreement.article_name }}
      </view>
      <scroll-view scroll-y="true" class="agreement-content" :style="{height: scrollHeight * 0.7 + 'px'}">
        <u-parse :html="agreement.content" :autoscroll="true"></u-parse>
      </scroll-view>
      <view class="agreement-btns">
        <view class="btn no-btn" @click="handleAgreement(false)">
          不同意
        </view>
        <view class="btn yes-btn" @click="handleAgreement(true)">
          同意
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import * as API_Article from '@/api/article.js';
  import * as API_Haibao from '@/api/haibao.js';
  import * as API_Passport from '@/api/passport.js';
  import * as API_Common from '@/api/common.js';
  import {
    RegExp
  } from '@/ui-utils/index.js';
  import Cache, {
    Keys
  } from '@/utils/cache.js';
  export default {
    data() {
      return {
        uuid: Cache.getItem('uuid'),
        // 会员注册 表单
        registerForm: {
          mobile: '',
          password: '',
          refererCode: '',
          sms_code: '',
          captcha: '',
        },
        captcha_url: '', //图片验证码
        codeTips: '获取验证码',
        agreement: '', //注册协议
        agreed: true, //同意注册协议
        showAgreement: false, //显示注册协议
        scrollHeight: uni.getSystemInfoSync().windowHeight - 130 //协议内容滚动高度
      };
    },
    computed: {
      //立即注册 按钮是否禁用
      login_disabled_valsms() {
        const {
          mobile,
          password,
          refererCode
        } = this.registerForm
        return !(mobile && password && refererCode)
      },
    },
    onLoad(e) {
      console.log(e)
      if (e.refererCode) this.registerForm.refererCode = e.refererCode
      // this.getArticleByPosition()
      this.handleChangeCaptchalUrl()
    },
    methods: {
      xiazai() {
        let url = 'http://xingruiappdownload.oss-cn-beijing.aliyuncs.com/xingbaihui.apk'
        if (uni.getSystemInfoSync().platform === 'ios') {
          url = 'https://www.lanzoui.com/xingruizhubao';
        }
        this.$qqyUtils.copyBankCard(url)
      },
      //获取注册协议
      getArticleByPosition() {
        API_Article.getArticleByPosition('REGISTRATION_AGREEMENT').then(response => {
          this.agreement = response
          this.showAgreement = true
        })
      },
      //是否同意注册协议
      handleAgreement(agreed) {
        if (agreed) {
          this.agreed = agreed
          this.showAgreement = false
        } else {
          uni.switchTab({
            url: '/pages/tabs/home/home'
          })
        }
      },
      // 获取图片验证码
      async handleChangeCaptchalUrl() {
        console.log(this.uuid)
        this.captcha_url = await API_Common.getValidateCodeUrl(this.uuid, 'REGISTER')
        console.log('查看验证码', this.captcha_url)
      },
      // 获取短信验证码
      handleCode() {
        const {
          mobile,
          captcha
        } = this.registerForm
        if (!mobile) {
          this.$u.toast('请输入手机号')
          return
        } else if (!RegExp.mobile.test(mobile)) {
          this.$u.toast('手机号格式有误')
          return
        } else {
          if (this.$refs.uCode.canGetCode) {
            // 向后端请求验证码
            API_Passport.sendRegisterSms(mobile, captcha).then(res => {
              this.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            }).catch(this.handleChangeCaptchalUrl)
          } else {
            this.$u.toast('倒计时结束后再发送')
          }
        }
      },
      //验证码发生变化时
      handleCodeChange(text) {
        this.codeTips = text;
      },
      //下一步 验证短信验证码
      async handleValSmsCode() {
        const {
          mobile,
          sms_code
        } = this.registerForm
        await API_Passport.validMobileSms(mobile, 'REGISTER', sms_code).then(() => {
          this.handleConfirmRegister()
        }).catch(this.handleChangeCaptchalUrl)

      },
      //立即注册
      async handleConfirmRegister() {
        if (!this.agreed) {
          this.$u.toast('请先同意注册协议')
          return false
        }
        const {
          password
        } = this.registerForm
        if (!RegExp.password.test(password)) {
          this.$u.toast('密码应为6-20位英文、数字或者特殊字符')
          return false
        }
        let res = await API_Haibao.registerShareWap(this.registerForm)
        console.log(Object.keys(res).length, res)
        if (Object.keys(res).length) {
          this.$u.toast('注册成功')
          // setTimeout(() => {
          //   this.$u.route(`/mine-module/haibao/appDownload`)
          // }, 1200)
        } else {
          this.$u.toast('注册失败')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .register-container {
    .agreement-view {
      .agreement-content {
        padding: 0 30rpx 20rpx 30rpx;
        box-sizing: border-box;
      }

      .agreement-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        width: 100%;
        position: fixed;
        bottom: 0;

        .btn {
          flex: 1;

          &.yes-btn {
            color: #FFFFFF;
            background-color: $u-type-error;
          }
        }
      }
    }

    .register-view {
      background-color: #FFFFFF;
      margin: 30rpx;
      border-radius: 20rpx;
      padding: 20rpx 40rpx;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

  }
</style>
